<template>
  <div>

    <el-aside :class="collapse?'main-aside-collapsed':'main-aside'">
  <Aside :collapse="collapse"></Aside>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <Header></Header>
      </el-header>
      <el-main class="main-center">Main</el-main>
    </el-container>
  <div class="content-box" >
    <router-view></router-view>
  </div>
  </div>
</template>

<script>
import Aside from "../confire/Aside";
import Header from "../confire/Header";

export default {
  name: "home",
  components:{
    Aside,
    Header
  },
  data(){
    return{
      collapse:false
    }
 },
  methods(){
  }
}
</script>

<style scoped>
.content-box {
  position: absolute;
  left: 138px;
  right: 0;
  top: 52px;
  bottom: 0;
  overflow-y: scroll;
  transition: left 0.3s ease-in-out;
  padding: 20px;
}

.content-collapse {
  left: 65px;
}

.main-header,
.main-center {
  padding: 0px;
  border-left: 0px solid #333;
}
</style>
